import React from "react";
// import { Map, List, Seq, fromJS, Range } from "immutable";

const App = () => {
  // todo 创建immutable对象
  // const map1 = Map({
  //   a: 3,
  //   b: 4,
  // });
  // const map2 = Map({
  //   a: 3,
  //   b: 4,
  // });
  // todo 获取immutable对象的属性
  // console.log(map1.get("a"));
  // console.log(map1.get("b"));
  // todo 修改immutable对象(生成新对象)
  // const map2 = map1.set("a", 5);
  // console.log(map2.get("a"));

  // console.log(map1 === map2); false
  // console.log(map1.equals(map2)); true equals表示里面的值是否一样

  // const map2 = map1.set("a", 5);
  // console.log(map1 === map2); // false
  // const map2 = map1.set("a", 3);
  // console.log(map1 === map2); // true

  // todo 创建immutable数组
  // const list1 = List([1, 2]);
  // const list2 = list1.push(3, 4, 5);
  // const list3 = list2.unshift(0);
  // const list4 = list1.concat(list2, list3);
  // console.log(list1.size === 2);
  // console.log(list2.size === 5);
  // console.log(list3.size === 6);
  // console.log(list4.size === 13);

  // todo 对象的合并和深度合并
  // const map1 = Map({ a: 1, b: 2, e: { x: 10, y: 20 } });
  // const map2 = Map({ c: 3, d: 4, e: { x: 30, z: 40 } });
  // const map3 = map1.merge(map2);
  // console.log(map3);
  // const map3 = map1.mergeDeep(map2);
  // console.log(map3);

  // todo immutable对象可以合并普通对象
  // const map1 = Map({ a: 1, b: 2 });
  // const map2 = map1.merge({ c: 3 });
  // console.log(map2);

  // todo 数组合并
  // const list1 = List([1, 2, 3]);
  // const list2 = List([4, 5, 6]);
  // const list3 = list1.concat(list2);
  // console.log(list3);
  // todo immutable数组可以合并普通数组
  // const list4 = list1.concat([4, 5]);
  // console.log(list4);

  // todo Seq是既可以生成immutable对象，也可以生成immutable数组
  // const map1 = Seq({ a: 3, b: 4 });
  // const list1 = Seq([1, 2, 3]);
  // console.log(map1);
  // console.log(list1);

  // todo Seq是有惰性的(可以从结果出发)
  // const oddSquares = Seq([1, 2, 3, 4, 5, 6, 7, 8])
  //   .filter((x) => {
  //     console.log("filter x:" + x);
  //     return x % 2 !== 0;
  //   })
  //   .map((x) => {
  //     console.log("map x:" + x);
  //     return x * x;
  //   });
  // console.log(oddSquares.get(1));

  // todo fromJS可以递归地生成immutable对象
  // const map1 = fromJS({ a: 3, b: { x: 10, y: 20 } });
  // console.log(map1);

  // todo update方法在原有的基础上进行修改
  // const map1 = Map({ a: 3, b: 4 });
  // console.log(map1.get("a"));
  // const map2 = map1.set("a", 5);
  // console.log(map2);
  // const map3 = map1.update("a", (v) => v + 1);
  // console.log(map3);

  // const map1 = fromJS({ a: { b: { c: [3, 4, 5] } } });
  // console.log(nested);
  // Map { "a": Map { "b": Map { "c": List [ 3, 4, 5 ] } } }
  // const map2 = map1.mergeDeep({ a: { b: { d: 6 } } });
  // console.log(nested2);
  // Map { "a": Map { "b": Map { "c": List [ 3, 4, 5 ], "d": 6 } } }*
  // console.log(map2.getIn(["a", "b", "d"]));
  // const map3 = map2.setIn(["a", "b", "d"], 9);
  // console.log(map3.getIn(["a", "b", "d"]));
  // const map4 = map3.updateIn(["a", "b", "d"], (v) => v * 2);
  // console.log(map4.getIn(["a", "b", "d"]));

  // const aRange = Range(1, Infinity)
  //   .skip(1000)
  //   .map((n) => -n)
  //   .filter((n) => n % 2 === 0)
  //   .take(2)
  //   .reduce((r, n) => r * n, 1);
  // console.log(aRange);

  return (
    <>
      <h2>immutable</h2>
      <input type="range" />
    </>
  );
};

export default App;
